<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GLB文件检查工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .result {
            margin: 10px 0;
            padding: 15px;
            border-radius: 5px;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px 5px;
            font-size: 16px;
        }
        button:hover {
            background: #0056b3;
        }
        .file-input {
            margin: 20px 0;
        }
        .file-input input {
            width: 100%;
            padding: 10px;
            border: 2px dashed #ccc;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 GLB文件检查工具</h1>
        
        <div class="info">
            <h3>📋 使用说明：</h3>
            <ol>
                <li>选择您的GLB文件进行检查</li>
                <li>工具会验证文件格式和内容</li>
                <li>如果文件有效，会显示模型信息</li>
                <li>如果文件无效，会显示错误信息</li>
            </ol>
        </div>

        <div class="file-input">
            <label for="glbFile">选择GLB文件：</label>
            <input type="file" id="glbFile" accept=".glb" onchange="checkGLBFile(this.files[0])">
        </div>

        <button onclick="checkOnlineGLB()">检查在线GLB文件</button>
        <button onclick="checkLocalGLB()">检查本地GLB文件</button>
        
        <div id="results"></div>
    </div>

    <script>
        async function checkGLBFile(file) {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<h3>🔍 检查结果：</h3>';
            
            if (!file) {
                showResult('请选择一个GLB文件', 'error');
                return;
            }

            const div = document.createElement('div');
            div.className = 'result info';
            div.innerHTML = `
                <h4>📁 文件信息：</h4>
                <p><strong>文件名：</strong> ${file.name}</p>
                <p><strong>文件大小：</strong> ${(file.size / 1024 / 1024).toFixed(2)} MB</p>
                <p><strong>文件类型：</strong> ${file.type}</p>
            `;
            resultsDiv.appendChild(div);

            try {
                const arrayBuffer = await file.arrayBuffer();
                const uint8Array = new Uint8Array(arrayBuffer);
                
                // 检查GLB文件头
                if (uint8Array.length < 12) {
                    showResult('文件太小，不是有效的GLB文件', 'error');
                    return;
                }

                const magic = new TextDecoder().decode(uint8Array.slice(0, 4));
                if (magic !== 'glTF') {
                    showResult(`文件头不是'glTF'，实际是'${magic}'，不是有效的GLB文件`, 'error');
                    return;
                }

                // 读取版本信息
                const version = new DataView(arrayBuffer).getUint32(4, true);
                const length = new DataView(arrayBuffer).getUint32(8, true);

                showResult(`✅ 有效的GLB文件！版本: ${version}, 长度: ${length} 字节`, 'success');

                // 尝试加载模型
                try {
                    const { GLTFLoader } = await import('https://unpkg.com/three@0.158.0/examples/jsm/loaders/GLTFLoader.js');
                    const loader = new GLTFLoader();
                    
                    const url = URL.createObjectURL(file);
                    loader.load(url, (gltf) => {
                        showResult(`🎉 模型加载成功！包含 ${gltf.scene.children.length} 个子对象`, 'success');
                        URL.revokeObjectURL(url);
                    }, (progress) => {
                        const percent = (progress.loaded / progress.total * 100).toFixed(1);
                        console.log(`加载进度: ${percent}%`);
                    }, (error) => {
                        showResult(`❌ 模型加载失败: ${error.message}`, 'error');
                        URL.revokeObjectURL(url);
                    });
                } catch (error) {
                    showResult(`⚠️ 无法在浏览器中加载模型: ${error.message}`, 'info');
                }

            } catch (error) {
                showResult(`❌ 文件读取失败: ${error.message}`, 'error');
            }
        }

        async function checkOnlineGLB() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<h3>🔍 检查在线GLB文件：</h3>';
            
            const testUrl = '/models/human-body.glb';
            
            try {
                const response = await fetch(testUrl);
                if (!response.ok) {
                    showResult(`❌ 文件不存在: ${testUrl} (状态码: ${response.status})`, 'error');
                    return;
                }

                const arrayBuffer = await response.arrayBuffer();
                const uint8Array = new Uint8Array(arrayBuffer);
                
                const magic = new TextDecoder().decode(uint8Array.slice(0, 4));
                if (magic === 'glTF') {
                    const version = new DataView(arrayBuffer).getUint32(4, true);
                    const length = new DataView(arrayBuffer).getUint32(8, true);
                    showResult(`✅ 在线GLB文件有效！版本: ${version}, 长度: ${length} 字节`, 'success');
                } else {
                    showResult(`❌ 在线文件不是有效的GLB格式，文件头: ${magic}`, 'error');
                }
            } catch (error) {
                showResult(`❌ 检查在线文件失败: ${error.message}`, 'error');
            }
        }

        async function checkLocalGLB() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<h3>🔍 检查本地GLB文件：</h3>';
            
            showResult('请使用文件选择器选择您的GLB文件进行检查', 'info');
        }

        function showResult(message, type) {
            const resultsDiv = document.getElementById('results');
            const div = document.createElement('div');
            div.className = `result ${type}`;
            div.innerHTML = `<p>${message}</p>`;
            resultsDiv.appendChild(div);
        }
    </script>
</body>
</html> 